<html>
<head>
<title>RChart, User Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="35">
<h3>RCHART, User Guide</h3>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><i>Copyright 2005, J4L 
  Components (http://www.java4less.com)</i></font> <br>
  <a href="tutorialcontents.html">Go bak to contents</a></p>
<hr>
<h3><font face="Arial, Helvetica, sans-serif">Linechart configuration / parameters 
  </font></h3>
<ul>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#0">Linechart 
    </a></font></li>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#1">Areachart 
    </a></font></li>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#2">Scatterchart 
    </a></font></li>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#3">Curves 
    </a></font></li>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#4">OHLC and 
    Candlestick </a></font></li>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#5">Bubblechart 
    </a></font></li>
  <li> <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#6">Linechart 
    3D</a></font></li>
</ul>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="0"></a>Linechart</font></h4>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following table constains 
  an example of a linechart with 2 lines (series):</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="37%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="23%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="40%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="37%" valign="top" height="541"> 
      <p>TITLECHART=Sales 2001<br>
        XLABEL=Month<br>
        YLABEL=Million $<br>
        YSCALE_MIN=0<br>
        TICK_INTERVALY=2<br>
        BIG_TICK_INTERVALX=1<br>
        XAXIS_GRID=0.2|WHITE|DASHED<br>
        YAXIS_GRID=0.2|0xffffff|DASHED<br>
        GRIDY=true<br>
        XAXIS_LABELS=June|July|Aug.|Sept.|Oct.|Nov.|Dec.<br>
        YAXIS_START_WITH_BIG_TICK=true<br>
        LEGEND=FALSE<br>
        SERIE_1=Products<br>
        SERIE_2=Services<br>
        SERIE_FONT_1=Arial|PLAIN|8<br>
        SERIE_FONT_2=Arial|PLAIN|8<br>
        SERIE_COLOR_1=RED<br>
        SERIE_COLOR_2=BLUE<br>
        SERIE_DATA_1=12|43|50|45|30|32|42<br>
        SERIE_DATA_2=20|41|48|39|36|34|50<br>
        SERIE_STYLE_1=0.2|RED|LINE<br>
        SERIE_STYLE_2=0.2|BLUE|LINE<br>
        SERIE_POINT_2=false<br>
        SERIE_POINT_COLOR_1=RED<br>
        SERIE_POINT_COLOR_2=BLUE<br>
        LEGEND_POSITION=BOTTOM<br>
        LEFT_MARGIN=0.18<br>
        CHART_FILL=0xffcc00 </p>
    </td>
    <td width="23%" valign="top" height="541"> 
      <p><font color="#3333FF">Title<br>
        Definition of the scale<br>
        <br>
        <br>
        <br>
        <br>
        Activate grids<br>
        <br>
        Grid at big ticks only<br>
        Labels of the x axis<br>
        Big tick at possition 0<br>
        Hide legend<br>
        Serie name<br>
        <br>
        Font for value<br>
        <br>
        color of font<br>
        <br>
        values to be plotted<br>
        <br>
        line style<br>
        <br>
        do not paint points<br>
        color of points<br>
        <br>
        possition of legend<br>
        Space reserved for y axis.<br>
        background color<br>
        </font></p>
    </td>
    <td width="40%" valign="top" height="541"> 
      <div align="left"> 
        <p>new Title(&quot;Sales 2001&quot;);<br>
          chart.XLabel=new HAxisLabel(&quot;Month&quot;,Color,font); <br>
          chart.YLabel=new VAxisLabel(&quot;Million $&quot;,Color,font); <br>
          chart.YAxis.scale.min=0; <br>
          chart.XAxis.scaleTickInterval=2;<br>
          chart.XAxis.bigTickInterval=1; <br>
          chart.XAxis.gridStyle=new LineStyle(...);<br>
          chart.YAxis.gridStyle=new LineStyle(...); <br>
          chart.XAxis.bigTicksGrid=true; <br>
          chart.XAxis.tickLabels{&quot;June&quot;,...}; <br>
          chart.YAxis.startWithBigTick=true;<br>
          chart.legend=null;<br>
          serie1=new LineDataSerie(values,lineStyle);<br>
          <br>
          serie1.valueFont=GraphicsProvider.getFont(...);<br>
          <br>
          <br>
          <br>
          see <i>values </i>in LineDataSerie constructor <br>
          <br>
          see <i>lineStyle </i>in LineDataSerie constructor <br>
          <br>
          serie2.drawPoint=false;<br>
          serie1.pointColor= GraphicsProvider.getColor(ChartColor.RED); <br>
          <br>
          chart.layout=Chart.LAYOUT_LEGEND_BOTTOM<br>
          chart.leftMargin=0.18;<br>
          chart.back= GraphicsProvider.getColor(0xff,0xcc,0)<br>
          <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/linechart.PNG" width="284" height="262"> 
  </font></p>
<p>&nbsp;</p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><b>Points outside the 
    chart</b></font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you want to have a fixed 
  maximum value for your Y Scale and leave some points outside the chart you can 
  do it like this:</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="106"> 
      <p>YSCALE_MAX=50<br>
        YSCALE_MIN=0<br>
        SERIE_DATA_1=12|43|<font color="#FF0033"><b>90</b></font>|45|30|32|42<br>
        SERIE_DATA_2=20|31|38|39|36|34|50<br>
        LINECHART_FIXED_LIMITS=TRUE</p>
    </td>
    <td width="26%" valign="top" height="106"> 
      <p><font color="#3333FF">Definition of the scale<br>
        <br>
        Values to be plotter. The 90 is outside the chart<br>
        Allow points to be outside the chart</font></p>
    </td>
    <td width="44%" valign="top" height="106"> 
      <div align="left"> 
        <p>chart.XAxis.scale.max=50;<br>
          chart.XAxis.scale.max=0; <br>
          <br>
          <br>
          linePlotter.fixedLimits=true; <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">the result is:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/linechartFixedLimits.PNG" width="252" height="231"></font></p>
<p>&nbsp;</p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><b>null values</b></font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you serie has some missing 
  points you can use NULL as value to paint a discontinued line. This feature 
  is not compatible with (LINECHART_FIXED_LIMITS=TRUE)</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="34"> 
      <p>YSCALE_MAX=50<br>
        YSCALE_MIN=0<br>
        SERIE_DATA_1=12|43|50|45|30|32|42<br>
        SERIE_DATA_2=20|31|<b>null</b>|39|36|34|50</p>
    </td>
    <td width="26%" valign="top" height="34"> 
      <p><font color="#3333FF">Definition of the scale<br>
        <br>
        Values to be plotter. The null is a missing value (discontinued line)</font></p>
    </td>
    <td width="44%" valign="top" height="34"> 
      <div align="left"> 
        <p><br>
          <br>
          Double[] values={new Double(20), new Double(30), null, ...};<br>
          serie2=new LineDataSerie(values,lineStyle); </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">As you see the blue series 
  does not a value for July.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/linechartNullvalue.PNG" width="261" height="224"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="1"></a>Areachart</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Areacharts are exactly 
  like linecharts, you only need to provide a fill color for the area. When designing 
  these kind of charts keep in mind that serie 1 is painted first (in the background) 
  and serie 2 in the foreground.</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="34"> 
      <p>SERIE_STYLE_1=0.2|0000|NORMAL <br>
        SERIE_STYLE_2=0.2|0|NORMAL <br>
        SERIE_FILL_1=0xff0000 <br>
        SERIE_FILL_2=0xff </p>
    </td>
    <td width="26%" valign="top" height="34"> 
      <p><font color="#3333FF">Black line used as border<br>
        <br>
        Color used for filling the areas</font></p>
    </td>
    <td width="44%" valign="top" height="34"> 
      <div align="left"> 
        <p>see <i>lineStyle </i>in LineDataSerie constructor <br>
          <br>
          serie1.fillStyle=new FillStyle(...);<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/areaChart.PNG" width="272" height="259"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="2"></a>Scatterchart</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Scatter chart are linecharts 
  where:</font></p>
<ol>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">no lines are painted 
    between points (SERIE_DRAW_LINE_*=false).</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">and you must provide 
    the Y and X coordinates for each point (SERIE_DATA_* and SERIE_DATAX_*). </font></li>
</ol>
<p><font face="Arial, Helvetica, sans-serif" size="-1">For example:</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="34"> 
      <p>SERIE_DATA_1=12|43|50|45|30|32|42|3|11 <br>
        SERIE_POINT_1=TRUE <br>
        SERIE_DATAX_1=1|2|2|1|3|4|6|7|3|1|2 <br>
        SERIE_DRAW_LINE_1=FALSE <br>
        SERIE_POINT_COLOR_1=0xff <br>
        LINECHART_POINT_SIZE=6</p>
    </td>
    <td width="26%" valign="top" height="34"> 
      <p><font color="#3333FF">Y Values<br>
        Paint blue squares<br>
        X possition of the points.<br>
        Do not paint lines between points<br>
        Points are blue<br>
        Size of squares is 6 pixels</font></p>
    </td>
    <td width="44%" valign="top" height="34"> 
      <div align="left"> 
        <p>serie1=new LineDataSerie(values,lineStyle);<br>
          serie1.drawPoint=true; <br>
          serie1.setDatax(...);<br>
          <i>lineStyle=null </i>in LineDataSerie constructor <br>
          serie1.pointColor=GraphicsProvider.getColor(0xff,0,0); <br>
          linePlotter.pointSize=6; <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Other usefull parameters 
  are:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">LINECHART_POINT_SIZE: 
    size of the squares used to paint points. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_POINT_COLOR_1: 
    color of the point (only LINE type). </font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/Scatter.PNG" width="267" height="246"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can also use images 
  instead of squares for plotting the points:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_POINT_IMAGE_1: 
    Name of the image file used for the points (gif or jpg). The file must be 
    either relative to the java classes (e.g. "point.gif" or "..\images\point.gif") 
    or absolute (e.g. "http://www.mysite.com/images/point.gif"). </font></li>
</ul>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="20"> 
      <p>SERIE_POINT_IMAGE_1=point.gif</p>
    </td>
    <td width="26%" valign="top" height="20"> 
      <p><font color="#3333FF">Use point.gif as image for the points</font></p>
    </td>
    <td width="44%" valign="top" height="20"> 
      <div align="left"> 
        <p>serie1.icon=image;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/pointImage.PNG" width="270" height="258"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you want to have 2 Y 
  axis you must use the following parameter:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_SECONDYAXIS: if 
    "true" this data serie will use the second Y axis. The second YAxis is painted 
    on the right side of the chart. </font></li>
</ul>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="196"> 
      <p>SERIE_SECONDYAXIS_2=TRUE <br>
        Y2LABEL=Local Currency Y2LABEL_VERTICAL=TRUE Y2AXIS=TRUE <br>
        <br>
        Y2SCALE_MIN=0 <br>
        Y2SCALE_MAX=100 TICK_INTERVALY2=2 BIG_TICK_INTERVALY2=10 Y2AXIS_INTEGER=TRUE 
        RIGHT_MARGIN=0.15</p>
    </td>
    <td width="26%" valign="top" height="196"> 
      <p><font color="#3333FF">Second serie (blue) uses axis Y2 (right Y axis)<br>
        Definition of the Y2 axis<br>
        Activate right Y axis<br>
        Definition of the scale (0-100)<br>
        <br>
        <br>
        <br>
        <br>
        Space for the right axis</font></p>
    </td>
    <td width="44%" valign="top" height="196"> 
      <div align="left"> 
        <p>serie1.secondYAxis=true;<br>
          chart.Y2Label==new VAxisLabel(&quot;local currency&quot;,color,font);<br>
          Y2Label.vertical=true;<br>
          cY2Axis=new Axis(Axis.VERTICAL,scY2);<br>
          chart.setY2Scale(cY2Axis); <br>
          cY2Axis.scale.min=0; <br>
          cY2Axis.scale.max=100; <br>
          cY2Axis.scaleTickInterval=2;<br>
          cY2Axis.bigTickIntervaL=10;<br>
          cY2Axis.IntegerScale=true; <br>
          chart.rightMargin=0.15; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/linechartY2.png" width="296" height="237"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">It is possible to define 
  a different color for the chart's background and the plotter's background:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">LINECHART_BACK: background 
    style. </font></li>
</ul>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="34"> 
      <p>CHART_FILL=0xffcc00 <br>
        LINECHART_BACK=0xcccc00 </p>
    </td>
    <td width="26%" valign="top" height="34"> 
      <p><font color="#3333FF"> Background color of the chart.<br>
        Background color of the plotter area. </font></p>
    </td>
    <td width="44%" valign="top" height="34"> 
      <div align="left"> 
        <p>chart.back= GraphicsProvider.getColor(0xff,0xcc,00);<br>
          linePlotter.back = GraphicsProvider.getColor(0xcc,0xcc,00);</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/backColor.png" width="275" height="263"></font></p>
<h4>&nbsp;</h4>
<h4><font face="Arial, Helvetica, sans-serif" size="-1">Tips</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can add tips to the 
  points of your chart like this:</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="34"> 
      <p>SERIE_POINT_1=TRUE <br>
        SERIE_TIPS_1=12|43|50|45|30|32|42 <br>
        CHART_SHOW_TIPS=TRUE</p>
    </td>
    <td width="26%" valign="top" height="34"> 
      <p><font color="#3333FF">Tips require points to be activated<br>
        Tips for each point<br>
        Activate tips</font></p>
    </td>
    <td width="44%" valign="top" height="34"> 
      <div align="left"> 
        <p><br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/lineChartTips.png" width="174" height="119"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="3"></a>Curves</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">RChart offers you 3 type 
  of curves:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Cubic curves: the points 
    you provide will be contained in the curve.</font></li>
</ul>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="23%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="46%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="23%" valign="top" height="26">SERIE_TYPE_1=CURVE </td>
    <td width="31%" valign="top" height="26"><i><font color="#3333FF">Use cubic 
      natural curves </font></i></td>
    <td width="46%" valign="top" height="26"> 
      <div align="left"> 
        <p>com.java4less.rchart.CurvePlotter plot=new CurvePlotter();<br>
          lineDataSerie.lineType=LinePlotter.TYPE_CUBIC_NATURAL;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/cuvers.png" width="291" height="262"></font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">B-SpLines: The points 
    will not be contained in the curve but the curve will be smoother than cubic 
    curves.</font></li>
</ul>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="23%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="46%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="23%" valign="top" height="26">SERIE_TYPE_1=B-SPLINES </td>
    <td width="31%" valign="top" height="26"><i><font color="#3333FF">Use B-SPLines</font></i></td>
    <td width="46%" valign="top" height="26"> 
      <div align="left"> 
        <p>com.java4less.rchart.CurvePlotter plot=new CurvePlotter();<br>
          lineDataSerie.lineType=LinePlotter.TYPE_B_SPLINES;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/bsplines.png" width="283" height="262"></font></p>
<p>&nbsp;</p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">The last type is not 
    a curve but a line calculated using the least squares algorithm. </font></li>
</ul>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="23%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="46%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="23%" valign="top" height="26">SERIE_TYPE_1=LINE_LEAST_SQUARES </td>
    <td width="31%" valign="top" height="26"><i><font color="#3333FF">Use least 
      squares </font></i></td>
    <td width="46%" valign="top" height="26"> 
      <div align="left"> 
        <p>com.java4less.rchart.CurvePlotter plot=new CurvePlotter();<br>
          lineDataSerie.lineType=LinePlotter.TYPE_LEAST_SQUARES_LINE;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/leastsquares.png" width="297" height="272"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="4"></a>OHLC and 
  Candlestick</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">In order to create a Candlestick 
  chart you must use the following additional parameters:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_MAX_DATA_*: maximum 
    values.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> SERIE_MIN_DATA_*: minimum 
    values. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_CLOSE_DATA_*: 
    close values.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_LINE_TYPE_1=CANDLESTICK. 
    </font></li>
</ul>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="27%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="36%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="37%" valign="top" height="26"> 
      <p>SERIE_DATA_1=12|43|50|45|30|32|42 SERIE_MAX_DATA_1=18|48|55|53|35|45|44 
        SERIE_MIN_DATA_1=20|30|40|30|28|20|34 SERIE_CLOSE_DATA_1=15|38|45|50|28|35|40 
        <br>
        SERIE_LINE_TYPE_1=CANDLESTICK<br>
        SERIE_CANDLE_POSITIVE_COLOR_1=0xff00 <br>
        SERIE_CANDLE_NEGATIVE_COLOR_1=0xff0000 <br>
        <br>
        SERIE_MAXMIN_STYLE_1=0.2|0xff|NORMAL </p>
    </td>
    <td width="27%" valign="top" height="26"><i><font color="#3333FF">Open values<br>
      Maximum values<br>
      Minimum values <br>
      Close values <br>
      Select candlestick type<br>
      Color of candlesitck is open&lt;close<br>
      Color of candlesitck is open&gt;close <br>
      <br>
      Style of the line</font></i></td>
    <td width="36%" valign="top" height="26"> 
      <div align="left"> 
        <p>serie= new MaxMinDataSerie(values, maxValues, minValues, closeValues, 
          lineStyle);<br>
          <br>
          <br>
          linePlotter.MaxMinType= linePlotter.MM_CANDLESTICK <br>
          <br>
          <br>
          serie.maxminStyle=new LineStyle(...);</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/candlestick.PNG" width="268" height="217"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><br>
  If you want to create a OHLC chart you must change the SERIE_LINE_TYPE_1 parameter:<br>
  </font></p>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="23%" valign="top" bgcolor="#CCCCCC" height="22"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC" height="22"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="46%" valign="top" bgcolor="#CCCCCC" height="22"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="23%" valign="top" height="26"> SERIE_DATA_1=12|43|50|45|30|32|42 
      <br>
      SERIE_MAX_DATA_1=18|48|55|48|35|35|44 <br>
      SERIE_MIN_DATA_1=8|30|40|30|28|20|34 <br>
      SERIE_CLOSE_DATA_1=9|33|45|40|28|30|40<br>
      SERIE_LINE_TYPE_1=OHLC<br>
      SERIE_OPENCLOSE_WIDTH_1=10 </td>
    <td width="31%" valign="top" height="26"><i><font color="#3333FF">Open values<br>
      Maximum values<br>
      Minimum values <br>
      Close values <br>
      Select OHLC type<br>
      Length of the open/close lines</font></i></td>
    <td width="46%" valign="top" height="26"> 
      <div align="left"> 
        <p>serie= new MaxMinDataSerie(values, maxValues, minValues, closeValues, 
          lineStyle);<br>
          <br>
          <br>
          linePlotter.MaxMinType= linePlotter.MM_OHLC;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/ohlc.PNG" width="277" height="256"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you only want to display 
  the maximum and minimum values (no open/close values) you can use:</font></p>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="23%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="46%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="23%" valign="top" height="26"> 
      <p>SERIE_LINE_END_1=TRUE <br>
        SERIE_DATA_1=12|43|50|45|30|32|42 <br>
        SERIE_MAX_DATA_1=18|48|55|48|35|35|44 <br>
        SERIE_MIN_DATA_1=8|30|40|30|28|20|34 <br>
      </p>
    </td>
    <td width="31%" valign="top" height="26"><i><font color="#3333FF">Draw line 
      end. <br>
      Open values<br>
      Maximum values<br>
      Minimum values <br>
      </font></i></td>
    <td width="46%" valign="top" height="26"> 
      <div align="left"> 
        <p><br>
          linePlotter.MaxMinType=linePlotter.MM_NORMAL;<br>
          serie= new MaxMinDataSerie(values,lineStyle);<br>
          serie.setMaxMinValues(maxValues,minValues); <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><br>
  <img src="images/maxmin.PNG" width="274" height="178"> </font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="5"></a>Bubblechart</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Bubblecharts will draw 
  a circle around points of the line. The radius of the circle is defined using 
  the SERIE_MAX_DATA_* parameter.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">For example:</font></p>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="27%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="24%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="49%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="27%" valign="top" height="26">SERIE_BUBBLE_1=TRUE <br>
      SERIE_FILL_BUBBLE_1=TRUE <br>
      SERIE_DATA_1=12|43|50|45|30|32|42 <br>
      SERIE_MAX_DATA_1=2|3|4|3|2|2|3|2 </td>
    <td width="24%" valign="top" height="26"><i><font color="#3333FF">Activate 
      bubbles<br>
      Bubbles should be filled<br>
      Values of the points<br>
      Values of the radius of the bubbles in (Y axis units)</font></i></td>
    <td width="49%" valign="top" height="26"> 
      <div align="left"> 
        <p>maxMinDataSerie.bubbleChart=true;<br>
          maxMinDataSerie.fillBubble=true; <br>
          maxMinDataSerie=new MaxMinDataSerie(data,lstyle); <br>
          maxMinDataSerie.setMaxMinValues(radiusValues,null); </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/bubble.png" width="282" height="258"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">if you want to remove the 
  line and only point the bubbles you must use SERIE_DRAW_LINE_1=false;</font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="6"></a>Linechart 
  3D</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">In order to create a 3D 
  linechart you only need to add the parameter: SERIE_TYPE_1=LINE3D (or use LinePlotter3D 
  in java code).</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The order 3D specific parameters 
  are:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">LINECHART3D_DEPTH=20 
    </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">LINECHART3D_BORDER=0.2|BLACK|LINE 
    </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">LINECHART3D_BACK=WHITE</font></li>
</ul>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="27%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="24%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="49%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="27%" valign="top" height="109"> 
      <p>SERIE_TYPE_1=LINE3D <br>
        LINECHART3D_DEPTH=20 LINECHART3D_BORDER=0.2|BLACK|LINE LINECHART3D_BACK=WHITE 
        <br>
        LINECHART3D_SEPARATOR=0 </p>
    </td>
    <td width="24%" valign="top" height="109"><i><font color="#3333FF">Use 3D 
      lines<br>
      Length of the Z axis (depth)<br>
      Border of the surface of the line.<br>
      Space between lines.</font></i></td>
    <td width="49%" valign="top" height="109"> 
      <div align="left"> 
        <p>linePlotter3D= new LinePlotter3D();<br>
          linePlotter3D.depth<br>
          linePlotter3D.border<br>
          linePlotter3D.back<br>
          linePlotter3D.interLineSpace</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/linechart3d.PNG" width="282" height="254"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">As in the 2D lineharts 
  you can create an arechart by adding the fill color for the area.</font></p>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="27%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="24%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="49%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="27%" valign="top" height="21"> 
      <p> SERIE_FILL_1=0xff0000 </p>
    </td>
    <td width="24%" valign="top" height="21"><i><font color="#3333FF">Fill area 
      with red color</font></i></td>
    <td width="49%" valign="top" height="21"> 
      <div align="left">serie1.fillStyle=new FillStyle(GraphicsProvider.get(ChartColor.RED));</div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/areaChart3D.png" width="282" height="263"></font></p>
<hr>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
